<template>
  <div>
  <el-card>
  <el-page-header @back="goBack" content="课程详细">
      
    </el-page-header>
    
    <div style="float: left; width: 150px; margin-bottom: 20px">
        <el-button @click="openUnitAdd()" type="primary" size="small">添加章节</el-button>
      </div>
      <el-table :data="jointData" style="width: 100%; margin-top: 10px; margin-left: 15px" show-overflow-tooltip default-expand-all row-key="id" stripe
          lazyb :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="序号" align="center" width="55">
          </el-table-column>
          <el-table-column prop="jointTitle" label="课程标题" align="center">
          </el-table-column>
          <el-table-column prop="jointIntroduction" label="课程介绍" align="center">
          </el-table-column>
          <el-table-column prop="videoId" label="视频" align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.videoId">
                <p>暂无视频</p>
              </div>
              <div v-else class="video-wrapper">
                <video controls loop :src="'http://127.0.0.1:8088/video/getVideoById?id=' + scope.row.videoId"></video>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="jointStatus" label="课程状态" align="center">
            <template slot-scope="scope">
              <el-switch style="display: block" v-model="scope.row.jointStatus" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用" active-value="0" inactive-value="1"
                @change="upSwith(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" slot="reference" style="margin-left: 5px" @click="openUpJoint(scope.row)">修改</el-button>
              <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delOne(scope.row.id)">
                <el-button type="primary" size="small" slot="reference" style="margin-left: 5px">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
  </el-card>
    
  </div>

</template>

<script>
export default {
  data() {
    return {
      courseId: 0,
      unitId: 0,
      //章节数组
      jointData: [],
    };
  },
  mounted() {
    // 在目标页面获取id参数
    this.courseId = this.$route.params.courseId;
    this.unitId=this.$route.params.unitId;
    this.selectJoint()
  },
  
  methods: {
    goBack() {
        this.$router.push('/unit')
    },
    //根据章节全查详细课程
    selectJoint() {
      this.$axios
        .get("http://127.0.0.1:8088/newCourse/selectJoint", {
          params: {
            unitId: this.unitId,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            this.jointData = res.data.data.content;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
</style>